<template>
  <div>
    <!-- 使用vuex中的数据 -->

    <h3>这是根组件 - {{ num }}</h3>
    <p>没有格式化的金额：{{ money }}</p>
    <p>格式化之后的金额是：{{ formatM }}</p>

    <p>
      <button @click="getData">点击触发请求数据</button>
    </p>
    <p>
      <button @click="ADD_NUM">修改num</button>
    </p>

    <p>当前请求的数据一共有{{ arrNum }}条, {{ demo }}</p>
    <ul>
      <li v-for="item in list" :key="item.id">
        <!-- {{ item }} -->
        <h4>{{ item.title }}</h4>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

// console.log(mapState({ money: 'demo' }))
// {
//   money: function() {}
// }

export default {
  methods: {
    ...mapActions(['getData']),
    ...mapMutations(['ADD_NUM'])
    // async fn() {
    //   await this.getData()
    // }
  },
  computed: {
    // 对象的扩展运算符，因为mapState方法生成出了一个对象，里面就是计算属性的写法
    ...mapState(['money', 'list', 'num']),
    // money: function() {},
    // list: function() {}
    ...mapGetters(['arrNum', 'formatM']),
    demo() {
      return 'ok'
    }
  }
}
</script>
